<template>
<div class="viewContent">
    <div class="form" >    
      <!--头部  -->
      <div class="title">
        <div class="circle">
        </div>
      </div> 
      <!-- 主体 --> 
      <div class="body">
          <div class="banner">
              <span  class="active" @click="clickLogin">登录</span>
              <!-- <span @click="clickRegister">注册</span> -->
          </div>  
          <!-- 区分、 -->
          <template v-if="state">
              <div class="input"> 
                  <ul>
                    <li>  
                        <img class="img" src="@/assets/img/phone.png" alt="">
                        <input type="text" v-model="loginParams.username" placeholder="填写手机号/用户名/邮箱">
                    </li>
                    <li>
                        <img class="img" src="@/assets/img/lock.png" alt="">
                        <input v-model="loginParams.password" type="password" placeholder="请输入密码">
                    </li>
                     <li class="li1">
                    
                      <input v-model="loginParams.verifcode" type="text" class="inputcode" placeholder="请输入验证码">
                        <img   :src="GetVerifCodeImgurl" height="45px" width="150px" @click="changeverifCode()">
                     

                    </li>
                  </ul>
              </div>  
          </template>
          <!-- <template v-else>
              <div class="input input2"> 
                  <ul class="another">
                    <li>  
                      <img class="img" src="@/assets/img/person.png" alt="">
                        <input v-model="registerParams.RealName" type="text" placeholder="请输入用户名">
                    </li>
                    <li>
                      <img class="img" src="@/assets/img/phone.png" alt="">
                      <input v-model="registerParams.Mobile" type="text" placeholder="请输入手机号"> 
                    </li>
                    <li>
                      <img class="img" src="@/assets/img/name.png" alt="">
                      <input v-model="registerParams.UserName" type="text" placeholder="请输入姓名"> 
                    </li>
                    <li>
                      <img class="img" src="@/assets/img/lock.png" alt="">
                      <input v-model="testPassword" type="password" placeholder="请输入密码"> 
                    </li>
                    <li>
                      <img class="img" src="@/assets/img/lock.png" alt="">
                      <input v-model="registerParams.Password" type="password" placeholder="请确认输入密码"> 
                    </li>
                    <li>
                      <img class="img" src="@/assets/img/department.png" alt="">
                      <input v-model="inputString" @focus="focusDepartment" type="text" placeholder="请选择部门"> 
                    </li>
                  </ul>
              </div>  
          </template> -->
      </div> 
          <div class="btn">
                <div class="logginBBtn" @tap="tapLogin">
                    {{(!state ?  "立即注册" : "立即登录")}} 
                </div>
          </div>
         
        <!-- 弹出选择的相应部门 -->
        <mt-popup v-model="popupModal" position="bottom"  class="popupModal">
          <mt-picker
            :slots="addressSlots"
            @change="onAddressChange"
            :visible-item-count="5"
            :show-toolbar="true"
            value-key="name"
          >
          </mt-picker> 
          <div class="listButton">
                <mt-button @click="clickConfirm" style="background:#367bf0;color:#fff" class="sure">确认</mt-button>
          </div>
        </mt-popup>
    </div>  


  
</div>
</template>
<script>
// 固定高度

import {getLogin,register,GetVerifCodeImgUrl } from "../../api/login"; 
import { GetMenudept } from "../../api/personalcenter";
import { Toast} from 'mint-ui';
import App from '../../App.vue';
import request from '@/utils/request';
export default {
  components: { App },
  watch: {
  },
  name: "login", 
  data() {
      return { 
        loginParams:{
          username:"",
          password:"",
          verifcode:""
        },
        userInfo:{}, 
        message:false,
        state:true,/* (为true代表登录页) */
        GetVerifCodeImgurl:"",
        registerParams:{
            UserName:"",
            RealName:"",
            Password:"",
            Mobile:"",
        }, 
        testPassword:"", 
        domHeight:0,
        popupModal:false,
      addressSlots: [
        {
          flex: 1,
          values: [
            {
              value: "",
              name: "123",
              disabled: "",
            },
            {
              value: "",
              name: "456",
              disabled: "",
            },
          ],
          className: "slot1",
          textAlign: "center",
          defaultIndex: 0,
        },
        {
          divider: true,
          content: "-",
          className: "slot2",
        },
        {
          flex: 1,
          values: [
            {
              value: "",
              name: "456",
              disabled: "",
            },
          ],
          className: "slot3",
          textAlign: "center",
          defaultIndex: 0,
        },
      ], 
        addressProvince:null,
        addressProvinceid:null,
        addressCityid:null, 
        addressCity:null, 
        inputString:"",
      }
  },
  created() {   
    let _this = this;
  }, 
  mounted() {
    this.GetMenudeptp();
     this.changeverifCode();
  },
  methods: {
      tapLogin() {    
          if(this.state) { 
            this.aLogin();
          }else {
            this.aRegister();
          }
      },   
      // 登录接口 
      aLogin() {   
        let  username=this.$getRsaCode( this.loginParams.username.trim());
        let   password=this.$getRsaCode( this.loginParams.password.trim());
        getLogin({
          username:username,
          password:password,
          verifcode:this.loginParams.verifcode
        }).then(res=>{   
          if(res.data) {
            if(res.data.data) {
              this.userInfo = JSON.parse(res.data.data)[0];  
              if(res.data.status === 0) {
               Toast({
                    message: '登录成功',
                    position: 'center',
                    duration: 1000
                  });
                // localStorage进行存储
                window.localStorage.userInfo = JSON.stringify(this.userInfo);
                window.localStorage.setItem("token",this.userInfo.AccessToken);
                this.$router.push("/home");
              }
            }else { 
               Toast({
                    message: res.data.message,
                    position: 'center',
                    duration: 1000
                  });
            }  
          }
        })
      },   
      // 注册接口
      aRegister() {
        function message(msg) {
          return Toast({
              message:msg,
              position:"center",
              duration:1000
            })
        }
        // 姓名
        let userName = this.registerParams.UserName.trim();
        // 用户名
        let realName = this.registerParams.RealName.trim();
        let mobile = this.registerParams.Mobile.trim();
        let password = this.registerParams.Password.trim();
        let testPassword = this.testPassword.trim();
        // 姓名验证
        // if(!realName) {
        //     return message("请输入用户名")
        // }
        // // 用户名验证
        // if(5 > realName.length || realName.length > 18) {
        //     return message("用户名长度应在5-18位")
        // } 
        // if(!new RegExp("^[a-zA-Z0-9_\u4e00-\u9fa5\\s·]+$").test(realName)) {
        //     return message("用户名不能有特殊字符")
        // }
        // if(/(^\_)|(\__)|(\_+$)/.test(realName)) {
        //     return message("用户名首尾不能出现下划线\'_\'")
        // }
        // if (!/^[0-9A-Za-z-_]{5,18}$/.test(realName)) {
        //     return message("用户名不能包含中文和特殊符号")
        // }
        // // 手机号验证
        // if(!mobile) {
        //     return message("请输入手机号")
        // }
        // // 姓名验证
        // if(!userName) {
        //     return message("请输入姓名")
        // }
        // // 密码验证
        // if(!/^(?=.*[A-Za-z])(?=.*[0-9])[a-zA-Z0-9]{6,12}$/.test(testPassword)) {
        //     return message("密码必须带大写字母或者小写字母和数字并且在6到12位，且不能有空格")
        // }  
        // // 密码验证
        // if(!/^[^ ]{6,16}$/.test(testPassword)) {
        //     return message("密码必须带大写字母或者小写字母和数字并且在6到12位，且不能有空格")
        // }  
        // // 俩次密码进行验证
        // if(this.testPassword !== this.registerParams.Password) {
        //   return Toast({
        //             message: '请确认输入的密码一致',
        //             position: 'center',
        //             duration: 1000
        //   });
        // }  
        // // 验证部门
        // if(!this.inputString.length){
        //   return Toast({
        //             message: '请选择部门',
        //             position: 'center',
        //             duration: 1000
        //   });
        // } 
        register({
          user:this.registerParams, 
          deptName:this.addressCity,
          deptId:this.addressCityid,
        }).then(res=>{    
           Toast({
                    message: res.data.message,
                    position: 'center',
                    duration: 1000
                  }); 
            if(res.data.status === 0) {
              this.$router.push("/login");
            }
        })
      },
      // 切换登录页 
      clickLogin() { 
        this.state = true;
        this.$nextTick(()=>{ 
          document.querySelector(".banner").children[0].classList.add("active")
          document.querySelector(".banner").children[1].classList.remove("active")
        })
      },
      // 切换注册页
      clickRegister() {
        this.state = false;
        this.$nextTick(()=>{
          document.querySelector(".banner").children[0].classList.remove("active")
          document.querySelector(".banner").children[1].classList.add("active")
        })
      },
      // 聚焦部门弹出输入框
      focusDepartment() {
          this.popupModal = true;
      },
      onAddressChange(picker, values) {
        picker.setSlotValues(1, values[0].children);
        if (values[0] && values[1]) {
          this.addressProvince = values[0].name;
          this.addressProvinceid = values[0].value;
          this.addressCityid = values[1].value;
          this.addressCity = values[1].name; 
          this.inputString = this.addressProvince +"  -  "+this.addressCity
        }
      }, 
      GetMenudeptp() {
        GetMenudept().then((res) => {
          this.addressSlots[0].values = JSON.parse(res.data.data);
          var tes = JSON.parse(res.data.data);
          if(tes!=null){
          for (var i = 0; i < tes.length; i++) {
            for (var j = 0; j < tes[i].children.length; j++) {
              if (tes[i].children[j].name == this.currendept) {
                this.addressSlots[0].defaultIndex = i;
                this.addressSlots[2].defaultIndex = j;
              }
            }
          }
          }
        });
      },
      clickConfirm() { 
        this.popupModal = false;
      },

      changeverifCode(){
        this.GetVerifCodeImgurl=GetVerifCodeImgUrl+"?"+Math.random(); 
      }
  },
};
</script>
<style lang="scss" scoped> 

/deep/.popupModal {
  z-index:9999!important; 
}  
 .listButton {
   position: absolute;
   top:0;
   right:0;
   .sure {
     width:60px;
     height:30px;
     font-size:14px;
     line-height: 30px;
   }
 }
 


.iconfont {
  font-size:20px !important;
}

//表格样式重构 
.form { 
  width:90vw;
  background:#fff;
  position: fixed;
  left:50%;
  transform: translateX(-50%);
  border-radius: 10px; 
  height: 550px;  
  top:50px;
  .title { 
  border-radius: 10px;
    width:100%;
    font-size: 20px;
    height:140px; 
    text-align: center;
    background-image: url(../../assets/iconImg/login.png);
    background-size: 100%;    
    .circle {
      width:100%;
      height: 18vw;
      border-radius: 50%;
      background:#fff;
      position: relative;
      z-index: 999; 
      top:106px; 
    }
  }  

  .body {
    height: 50vh;
    width:100%;
    top:0px; 
    position: relative;
    z-index: 999;  
    padding:0 5vw;
    box-sizing: border-box;
    .banner {
      width:100%;
      height: 30px;
      line-height: 30px;  
      font-size:18px;
      span:first-child {
        margin-right: 40px;
      } 
      span {
        color:grey;
      } 
      span.active {
        color:black;
        font-weight: bold; 
        font-size:23px;
      }
    } 

    .input {
      width:100%;
      margin-top:40px;   
      ul {
        width:100%; 
        display: flex; 
        flex-wrap: wrap; 
        padding:0; 
        li {  
          position: relative; 
          .img {
            width:25px;
            height: 25px;
            color:grey;
            position: absolute;
            left:0; 
            top:50%;
            transform: translateY(-50%);  
            vertical-align: middle;
          }
          input {  
            padding-left: 30px;
            box-sizing: border-box;
            width:100%;
            border:0 none; 
            outline-style: none;
            height: 30px;
            line-height: 30px;
            vertical-align: middle;
          }
          list-style: none;
          width:100%;  
          height: 40px;
          line-height: 40px;
          border-bottom:1px solid #ddd; 
        } 
        li:last-child {
          margin-top:20px;
        }
        .li1{
          border-bottom: none;
          display: flex;
          display: -webkit-flex
        }
        .inputcode{
          border: 1px solid #95999c;
           height: 45px;
      line-height: 45px;
      margin-right: 10px;
        }
      } 
      .another {
        li:last-child {
          margin-top:0px;
        }  
        li {
          margin-bottom:10px;
        } 
      }
      // border:1px solid red;
    }   
    
    .input2 {
      margin-top:20px;
     
    }

  }

    .btn {
      position: absolute; 
      left: 0;
      margin:0;
      padding:0;
      bottom:30px;
      width:100%;
      height: 20px; 
      z-index: 9999;
      .logginBBtn {
        width:80%;
        height: 40px;
        line-height: 40px;
        background:blue;
        color:#fff;
        margin:0 auto;
        text-align: center;
        background:rgb(34,80,129);
        border-radius: 20px;
      }
    }
  .text { 

    .logo { 
      text-align: left; 
      padding:0 10px;
      box-sizing: border-box;  
      height:40px;
      line-height: 40px;
      img {
        width:20px;
        height:20px;
        vertical-align: middle;
      } 
      .title2 {
        vertical-align: middle; 
        color:#95999c;
      }
      
    }

  }
}  
.viewContent { 
  box-sizing: border-box;
  width:100%;
  height:100vh;
  background:url("../../assets/img/loginbg.png");
} 
.mint-field-core {
  font-size: 13px; 
}

</style>